<template>
  <div class="remarksDialog-box" :class="{ 'remarksDialog-edit-box': !route.meta.loopType }">
    <t-dialog 
      v-model:visible="store.videoInfoShow" 
      width="100vw" 
      placement="center" 
      :confirm-on-enter="true"
      :on-cancel="onCancel"
      :on-esc-keydown="onEscKeydown" 
      :on-close-btn-click="onCloseBtnClick"
      :on-overlay-click="onOverlayClick"
      :on-close="close"
      :on-confirm="onConfirmAnother"
    >
      <getOutlineComponent /> 
    </t-dialog>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'videoDialog',
});
</script>

<script setup lang="ts">
// @ts-nocheck
import styleComponent from './style/index.vue';
import style2 from './style/index2.vue';
import { ref, watch, reactive, nextTick, onMounted, defineComponent, computed } from 'vue';
import { commonDataStore, useProjectStore } from '@/store';
import { useRoute } from 'vue-router';
import { urls } from '@/utils/request/upload';

const route = useRoute();
const store = useProjectStore();
const commonStore = commonDataStore();

const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});

const getOutlineComponent = computed(() => {
  switch (commonStore.templateId) {
    case 546821049266245:
      return styleComponent;
      break;
    case 568727972499525:
      return style2;
      break;
    default:
      return styleComponent;
      break;
  }
});

const onConfirmAnother = (context) => {
  // console.log('点击了确认按钮', context);
  store.videoInfoShow = false;
};
const close = (context) => {
  //   console.log('关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发', context);
  store.videoInfoShow = false;
};
const onCancel = (context) => {};
const onEscKeydown = (context) => {};
const onCloseBtnClick = (context) => {};
const onOverlayClick = (context) => {};
</script>

<style scoped lang="less">
.remarksDialog-box {
  width: 100%;
  height: 100%;
  :deep(.t-dialog) {
    padding: 0;
    background: transparent;
    border: none;
  }
  :deep(.t-dialog__header) {
    display: none;
  }
  :deep(.t-dialog__footer) {
    display: none;
  }

  :deep(.t-dialog__body) {
    padding: 0;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-content: center;
  }
}
</style>
